<template>
    <div id="option-btn">
        <div :class="{'checked' : on_off}" @click="optionBtn(1)"><span>知识</span></div>
        <div :class="{'checked' : !on_off}" @click="optionBtn(2)"><span>直播</span></div>
    </div>
</template>

<script>
    export default {
        props: ['text'],
        data () {
            return {
                text:this.text,
                on_off:true,
                ondata:''
            }
        },
        methods:{
            optionBtn:function(type){
                if(type === 1){
                    this.on_off = false;
                }else{
                    this.on_off = true;
                }
                this.on_off = !this.on_off;
                this.$emit("optionBtn",this.on_off)
            }
        }
    }
</script>

<style lang="less">
#option-btn{
    width:100%;
    height:1.1rem;
    box-shadow: inset 0 -1px 0 0 #DDDDDD;
    background:#fff;
    div{
        width:50%;
        height:1.1rem;
        float:left;
        font-size: 16px;
        color: #1F2D3D;
        span{
            margin:0 1.5rem;
            line-height:1.1rem;
            display: block;
            text-align: center;
        }
    }
    .checked{
        color: #6699FF;
        span{
            line-height:1.05rem;
            border-bottom:2px solid #6699FF;
        }
    }
}
</style>